<script setup>
import { inject, onMounted, ref, shallowRef } from "vue";
import emitter from "@/utils/mitt.js";
import { getArticleList } from "@/api/article.js";

const noticeList = ref([]);

const searchParam = ref({
	articleColumnId: 7,
	isView: 1,
});

const getNoticeList = async (page = 1) => {
	const params = {
		pageNum: page,
		pageSize: 10,
		...searchParam.value,
	};
	const res = await getArticleList(params);
	try {
		if (res.data.code === 200) {
			noticeList.value = res.data.data.records;
			pagination.value.total = res.data.data.total;
			pagination.value.pageCount = res.data.data.pages;
			pagination.value.current = res.data.data.current;
		} else {
			console.log(res.data.msg);
		}
	} catch (e) {
		console.log(e);
	}
};
// getNoticeList()

const splitTime = (time) => {
	// 将YYYY-MM-DD格式转换为{year: YYYY, month: MM, day: DD}
	const timestamp = Date.parse(time);
	// 如果timestamp为NaN则返回''
	if (!timestamp) return "";
	const newTime = new Date(timestamp);
	return {
		year: addZero(newTime.getFullYear()),
		month: addZero(newTime.getMonth() + 1),
		day: addZero(newTime.getDate()),
	};
};
const addZero = (num) => `${num < 10 ? "0" : ""}${num}`;

const changePath = (path, query = null) => {
	emitter.emit("changePath", {
		path: path,
		query: query,
	});
};

const pagination = ref({
	current: 1,
	pageSize: 10,
	total: 0,
	pageCount: 0,
});

const ChangePage = async (page) => {
	pagination.value.current = page;
	await getNoticeList(page);
};
getNoticeList();
</script>

<template>
	<div class="pageContent">
		<n-list :bordered="false" hoverable style="margin-bottom: 20px">
			<n-list-item v-for="item in noticeList" style="padding: 12px 0">
				<template #prefix>
					<div class="timeBox" style="text-align: center">
						<div class="timeBoxDay">
							{{ splitTime(item.updateTime).day }}
						</div>
						<div class="timeBoxYaM">
							{{ splitTime(item.updateTime).year + "/" + splitTime(item.updateTime).month }}
						</div>
					</div>
				</template>
				<div @click="changePath(`/index/news/noticeList/newsDetail`, { id: item.id })" class="titleLabel">
					{{ item.title }}
				</div>
			</n-list-item>
		</n-list>
		<n-space justify="center">
			<n-pagination
				show-quick-jumper
				v-model:page="pagination.current"
				v-model:page-size="pagination.pageSize"
				:onUpdate:page="ChangePage"
				:page-count="pagination.pageCount"
				:page-slot="5">
				<template #prefix> 共{{ pagination.total }}条 </template>
				<template #suffix> 页 </template>
			</n-pagination>
		</n-space>
	</div>
</template>

<style scoped>
.timeBox {
	width: 70px;
	height: 70px;
	border: 1px solid var(--primary-color);
	color: var(--primary-color);
}
.timeBoxDay {
	height: 48px;
	font-weight: bold;
	font-size: 24px;
	border-bottom: 1px solid var(--primary-color);
	margin: auto;
	line-height: 48px;
}
.timeBoxYaM {
	height: 22px;
}
</style>
